<template>
	<view>
		<!-- 专辑背景开始 -->
		<view class="album_bg">
			<image :src="album.cover" mode="widthFix"></image>
			<view class="album_info">
				<view class="album_name">{{album.name}}</view>
				<view class="album_btn">
					关注专辑
				</view>
			</view>
		</view>
		<!-- 专辑背景结束 -->
		<!-- 专辑作者开始 -->
		<view class="album_author">
			<view class="album_author_info">
				<image :src="album.user.avatar" mode="widthFix"></image>
				<view class="album_author_name">
					<!-- view标签不会识别换行\n字符,要用text标签 -->
					<text>{{album.user.name}}</text>
				</view>
			</view>
			<view class="album_author_desc">{{album.desc}}</view>
		</view>
		<!-- 专辑作者结束 -->
		
		<!-- 专辑列表开始 -->
		<view class="album_list">
			<view class="album_item" v-for="(item,index) of wallpaper" :key="item.id">
				<go-detail :list="wallpaper" :index="index">
					<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
				</go-detail>
			</view>
		</view>
		<!-- 专辑列表结束 -->
	</view>
</template>

<script>
	import goDetail from "@/components/goDetail.vue"
	export default {
		data() {
			return {
				params:{
					limit:30,
					order:'new',
					skip:0,
					// 1 返回值中有album对象 0 返回值中只有wallpaper数组，表示不是第一次请求
					first:1
				},
				id:-1,
				album:{},
				wallpaper:[],
				hasMore:true
			}
		},
		onLoad(options){
			// console.log(options);
			this.id = options.id
			// this.id = '5d5f8e45e7bce75ae7fb8278'
			// this.id = '5e26b92be7bce739af7644b3'
			// 先把传过来的id拿到再发送请求
			this.getList()
			
		},
		// 页面触底的钩子
		onReachBottom(){
			if(this.hasMore){
				// 表示不再是第一次请求
				this.params.first = 0
				this.params.skip+=this.params.limit
				this.getList()
			}else{
				uni.showToast({
					title:'没有更多数据了',
					icon:'none'
				})
			}
		},
		components:{
			goDetail
		},
		methods: {
			getList(){
				this.request({
					url:`http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
					data:this.params
				}).then(result=>{
					console.log(result);
						// 判断对象是否还有属性值
						if(Object.keys(this.album).length === 0){
							this.album = result.res.album
						}
					if(result.res.wallpaper.length === 0){
						this.hasMore = false
						uni.showToast({
							title:'没有更多数据了',
							icon:'none'
						})
						return
					}
					this.wallpaper = [...this.wallpaper,...result.res.wallpaper]
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.album_bg{
		position: relative;
		image{
			
		}
		.album_info{
			padding: 0 15rpx;
			position: absolute;
			width: 100%;
			height: 80rpx;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			.album_name{
				font-size: 40rpx;
			}
			.album_btn{
				background-color: $color;
				width: 150rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}
	}
	.album_author{
		padding: 10rpx;
		.album_author_info{
			padding: 10rpx 0;
			display: flex;
			image{
				width: 50rpx;
			}
			.album_author_name{
				color: #000;
				margin-left: 15rpx;
			}
			
		}
		.album_author_desc{
			
		}
	}
	.album_list{
		display: flex;
		flex-wrap: wrap;
		.album_item{
			width: 33.33%;
			border: 3rpx solid #FFFFFF;
			image{
				height: 160rpx;
			}
		}
	}
</style>
